<template>
  <view class="verify-input">
    <view class="container">
      <view class="title text-white" v-text="title"></view>
      <view class="description text-grey" v-text="description"></view>
      <view class="verify-box flex">
        <view
          v-for="(i,k) in length"
          :key="k"
          class="flex-sub margin-xs text-white"
          :class="{ on: code && (k < code.toString().length) }"
        >{{ code.toString().length > 0 ? code[k] : '' }}</view>
        <input
          type="number"
          comfirm-type="done"
          placeholder-class="input-placeholder"
          :maxlength="length"
          :minlength="length"
          class="text-black"
          v-model="code"
        />
      </view>
      <view
        class="tip"
        :class="currentTime > 0 ? 'text-grey' : 'text-red'"
        v-text="tip"
        @click="$emit('event-get-code', $event)"
      ></view>
      <view class="next-btn">
        <button
          class="next-btn cu-btn round text-white"
          :class="verifyError ? 'bg-grey' : 'bg-red'"
          @click="onNext"
          v-text="btnText"
        ></button>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  data() {
    return {
      verifyError: false,
      tip: "",
      code: "",
      currentTime: 0
    };
  },
  props: {
    // 验证码长度
    length: {
      type: Number,
      default: 6,
      validator(value) {
        return value >= 4 && value <= 6;
      }
    },
    // 验证码计时
    time: {
      type: Number,
      default: 5
    },
    title: {
      type: String,
      default: "输入验证码"
    },
    description: {
      type: String,
      default: "验证码已发到您的手机"
    },
    btnText: {
      type: String,
      default: "绑定"
    }
  },
  watch: {
    code: {
      immediate: true,
      handler(n) {
        this.verifyError = n.toString().length !== this.length;
      }
    }
  },
  mounted() {
    this.beginTimer();
  },
  filters: {
    sliceCode(str, i) {
      if (!str) return "";
      return str.substr(i, 1);
    }
  },
  methods: {
    beginTimer() {
      this.currentTime = this.time || 0;
      const funTimer = () => {
        this.currentTime--;
        if (this.currentTime === 0) {
          clearInterval(timer);
          this.tip = "点击获取验证码";
        } else {
          this.tip = this.currentTime.toString() + "s后可重新发送";
        }
      };
      this.tip = this.currentTime.toString() + "s后可重新发送";
      let timer = setInterval(funTimer, 1000);
    },
    onNext() {
      if (!this.verifyError) this.$emit("event-next", this.code);
    }
  }
};
</script>

<style lang="scss">
.verify-input {
  background-image: url("~@/static/images/login/bg.jpg");
  background-size: 100%;
  background-repeat: round;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;

  .container {
    width: 70%;
    margin: 0 auto;
    //padding-top: 200upx;

    .title {
      font-size: 40upx;
    }

    .description {
      font-size: 24upx;
      line-height: 50upx;
      margin-bottom: 50upx;
    }

    .verify-box {
      position: relative;
      width: 100%;
      height: 100upx;

      > view {
        border-bottom: 4upx solid #eee;
        text-align: center;
        font-size: 48upx;
        &.on {
          border-bottom: 4upx solid red;
        }
      }

      input {
        z-index: 9999999;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
      }
    }

    .tip {
      margin-top: 60upx;
      font-size: 24upx;
    }
  }

  .next-btn {
    overflow: hidden;

    .cu-btn {
      float: right;
      margin-top: 200upx;
    }
  }
}
</style>
